<style>
    .layui-form-label.required:before { /* 这种写法也可以*/
        content: ' *';
        color: red;
    }

    .open-form .layui-input-block{
        margin-left: 145px;
    }
    .open-form .layui-form-label {
        width: 115px;
    }

    /*   添加生产计划   */
    .addProductionPlanForm-title, .examineProductionPlanForm-title {
        width: 100%;

    }

    .addProductionPlanForm-title .title, .examineProductionPlanForm-title .title {
        display: inline-block;
        margin: 20px;
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        line-height: 19px;
        position: relative;
        padding: 6px 0 19px 0;
    }

    .addProductionPlanForm-title .title:after, .examineProductionPlanForm-title .title:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: calc(100% + 6px);
        height: 3px;
        background: #0A8B0A;
    }
</style>
<!-- 表单弹窗 -->
<form lay-filter="productOrderInfoDetailForm" class="layui-form open-form">
    <div class="open-model">
        <div class="open-auto" style="padding-left: 0;">
            <div class="examineProductionPlanForm-title">
                <h3 class="title" style="margin: 0 0 20px 25px">开工单信息</h3>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md4">
                    <label class="layui-form-label required">订单来源：</label>
                    <div class="layui-input-block">
                        <select id="orderSource" name="orderSource" disabled class="common-select-search"
                                lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label required">客户订单编号：</label>
                    <div class="layui-input-block">
                        <input id="orderNo" disabled name="orderNo" placeholder="客户订单编号" type="text" class="layui-input"
                               required autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md4 required">
                    <label class="layui-form-label required">订单类型：</label>
                    <div class="layui-input-block">
                        <select id="orderType" disabled name="orderType" class="common-select-search"
                                lay-verify="required"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md4 required">
                    <label class="layui-form-label required">所属客户：</label>
                    <div class="layui-input-block">
                        <select id="customerInfo" disabled name="customerInfo" class="common-select-search"
                                lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label required">采购客户代码：</label>
                    <div class="layui-input-block">
                        <input id="purchaseCode" disabled name="purchaseCode" placeholder="采购客户代码" type="text" class="layui-input"
                               lay-verify="required"
                               required autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <label class="layui-form-label required">采购组织：</label>
                    <div class="layui-input-block">
                        <input id="purchaseNameInfo" disabled name="purchaseNameInfo" placeholder="采购组织名称" type="text" class="layui-input"
                               required autocomplete="off"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md4">
                    <label class="layui-form-label required">订单下单时间：</label>
                    <div class="layui-input-block">
                        <input id="orderTime" disabled name="orderTime" placeholder="订单下单时间" type="text" class="layui-input"
                               required autocomplete="off"/>
                    </div>
                </div>
            </div>
            <div class="examineProductionPlanForm-title">
                <h3 class="title" style="margin: 10px 0 5px 25px">订单SKU详情信息</h3>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md12">
                    <div class="layui-input-block" style="margin-left: 25px;!important;">
                        <table class="layui-table" id="proDeliveryOrderDetailTableInfo" lay-filter="proDeliveryOrderDetailTableInfo"></table>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="productOrderInfoUpdateSubmit" lay-submit>保存</button>
        </div>
    </div>
</form>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'laydate', 'admin', 'config'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var config = layui.config;
        var table = layui.table;
        var admin = layui.admin;
        var form = layui.form;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#orderTime'
            , type: 'datetime'
        });

        let productOrderDetailInfoData = admin.getTempData("productOrderDetailInfoData");

        $("#purchaseNameInfo").val(productOrderDetailInfoData.purchaseName)


        //订单来源
        admin.getDictList("orderSource", "pro_product_order_source", "1", "订单来源");

        //订单类型
        admin.getDictList("orderType", "pro_product_order_type", productOrderDetailInfoData.orderType, "订单类型");

        //初始化客户正式客户信息
        admin.req('enterprise/sell/admin/customersInfo/list', {limit: 9999}, function (res) {
            if (res.code == 200) {
                if (res.data.length > 0) {
                    $.each(res.data, function (index, item) {
                        $('#customerInfo').append(new Option(item.customerName, item.id));
                    })
                    if (productOrderDetailInfoData){
                        $('#customerInfo').val(productOrderDetailInfoData.customerId)
                    }
                    form.render('select');
                }
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        }, 'GET');

        form.val('productOrderInfoDetailForm',productOrderDetailInfoData)


        //表单提交事件
        form.on('submit(productOrderInfoUpdateSubmit)', function (d) {
            layer.load(2);
            d.field.customerId = $("#customerInfo").val();
            d.field.id = productOrderDetailInfoData.id;
            d.field.purchaseName = $("#purchaseNameInfo").val();
            admin.req('production/delivery/admin/orderInfo/update', d.field, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1});
                    table.reload('proDeliveryOrderTableInfo');
                    layer.closeAll('page');
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'POST');
            return false;
        });

        // 渲染表格
        table.render({
            elem: '#proDeliveryOrderDetailTableInfo',
            url: config.base + 'production/delivery/admin/orderDetailInfo/list?orderNo='+productOrderDetailInfoData.orderNo,
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers', title: '序号', align: 'center', width: 60}
                , {field: 'skuCode', title: '物料编号', align: 'center'}
                , {field: 'skuName', title: '物料名称', align: 'center'}
                , {field: 'skuSpec', title: '规格码', align: 'center'}
                , {field: 'remark', title: '组件描述', align: 'center'}
                , {field: 'productionLine', title: '产线', align: 'center'}
                , {field: 'deliveryNum', title: '数量', align: 'center'}
                , {field: 'unitName', title: '单位', align: 'center'}
                , {field: 'deliveryTime', title: '提货时间', align: 'center'}
                , {field: 'alreadyNum', title: '已排产', align: 'center'}
                , {field: 'inSaveNum', title: '已入库', align: 'center'}
                , {field: 'sendNum', title: '已发货', align: 'center'}
                , {field: 'deliveryChance', title: '交付率', align: 'center'}
            ]]
        });
    });
</script>